<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        #wrap{
            background-color: #282828;
        }
        #headerBanner{
            background: url(../../res/drawable-xhdpi/banner_bg.png) left top repeat-x;
            text-align: center; background-color: #3C3C3C; 
            background-size: 8px 48px;
            width: 100%;
            height: 48px;
            position: relative;
            display: -webkit-box;
            -webkit-box-orient:horizontal;
            display: -webkit-flex;
            display: flex;
        }
        #headerBanner span{
            position: relative;
        }
        #headerBanner .name{
            color: #FFF;
            height: 45px;
            line-height: 45px;
            float: left;
            text-indent: 15px;
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            flex: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            text-align: left;
        }
        #headerBanner .cinema_right{
            float: left;
        }
        #headerBanner .status{
            float: left;
            width: 14px;
            height: 45px;
            line-height: 45px;
            padding: 0 1px;
        }
        #headerBanner .status_t{
            background: url(../../res/drawable-xhdpi/ico_ticket.png) center center no-repeat;
            background-size: 14px 14px;
        }
        #headerBanner .status_s{
            background: url(../../res/drawable-xhdpi/ico_seat.png) center center no-repeat;
            background-size: 14px 14px;
        }
        #headerBanner .status_g{
            background: url(../../res/drawable-xhdpi/ico_tuan.png) center center no-repeat;
            background-size: 14px 14px;
        }
        #headerBanner .info{
            float: right;
            width: 26px;
            height: 45px;
            line-height: 45px;
            margin: 0 8px;
            background: url(../../res/drawable-xhdpi/ico_tips_gray.png) center center no-repeat;
            background-size: 26px 26px;
        }
        #headerBanner .collect{
            float: right;
            width: 26px;
            height: 45px;
            line-height: 45px;
            margin: 0 8px;
            background: url(../../res/drawable-xhdpi/ico_star_gray.png) center center no-repeat;
            background-size: 26px 26px;
        }
        #headerBanner .collect:active,#headerBanner .collect.active{
            background: url(../../res/drawable-xhdpi/ico_star_orange.png) center center no-repeat;
            background-size: 26px 26px;
        }

        /**/
        #main{
            padding: 0;
            position: relative;
        }
        #main_shadow{
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-filter: blur(6px);
            filter: blur(6px);
            opacity: 0.3;
        }
        
        #cinemaDetailBackBtn{
            position: absolute;
            left: 0;
            bottom: 0;
            width: auto;
            height: 48px;
            background: url(../../res/drawable-xhdpi/arrow_left_yellow.png) 8px center no-repeat;
            background-size: 7px 14px;
        }
        #cinemaDetailBackBtn:active{
            background-color: #191919;
        }
        #cinemaDetailBackBtn .chooseCityImg{
            display: inline-block;
            border: none;
            outline: none;
            width: 32px;
            height: 32px;
            float: left;
            margin-left: 22px;
            margin-top: 7px;
            
        }
        #cinemaDetailBackBtn .chooseCityBackSpan{
            color: #D4A82A;
            line-height: 48px;
            padding: 0 1em;
        }
        #chooseStyleBtn{
            position: absolute;
            right: 0;
            bottom: 0;
            height: 48px;
            width: 48px;
            background: url(../../res/drawable-xhdpi/ico_share_white.png);
            background-size: 100% 100%;
        }
        #chooseStyleBtn:active{
            background: url(../../res/drawable-xhdpi/ico_share_orange.png);
            background-size: 100% 100%;
        }

        /*box_top*/
        #main .box_top{
            position: absolute;
            height: 26%;
            width: 100%;
            z-index: 2;
            overflow: hidden;
        }
            /*列表*/
        #movieList{
            position: absolute;
            /*text-align: -webkit-center;*/
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-flex-direction: row;
            flex-direction: row;
            height: 100%;
        }
        #movieList .movies{
            width: 5.7em;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            /*padding: .5em 0;*/
        }
        #movieList .movies .moviesTransBox{
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            flex: 1;
            text-align:center;
            position: relative;
        }
        #movieList .movies img{
            width: 100%;
            /*height: 100%;*/
            display: block;
            box-shadow: #000 0px 0px 40px;
            background: lightpink;
            position:absolute; 
            left:50%; 
            top:50%; 
            -webkit-transform:translate(-50%,-50%); 
        }
            /*列表end*/
        
        /*box_middle*/
        #main .box_middle{
            position: absolute;
            height: 74%;
            top: 26%;
            width: 100%;
            background-color: #282828;
            z-index: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            /*overflow: scroll;*/
        }
        #main .box_middle_top{
            padding: 0 1em;
        }
        #main .box_middle_title{
            
        }
        #main .box_middle_title span{
            color: #FFC600;
            height: 46px;
            line-height: 46px;
        }
        #main .box_middle_bottom{
            padding: 0 1em;
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            flex: 1;
            /*display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;*/
            /*padding-bottom: 70px;*/
        }
        #main .box_middle_date{
            height: 40px;
            width: 100%;
            /*display: -webkit-box;
            -webkit-box-orient:horizontal;
            display: -webkit-flex;
            display: flex;*/

        }
        #main .box_middle_date_tab{
            color: #6F6F6F;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*-webkit-box-flex: 1; 
            -webkit-flex: 1;
            flex: 1;*/
            background-color: #373737;
            float: left;
            width: 32%;
        }
        #main .box_middle_date_tab.last{
            float: right;
        }
        #main .box_middle_date_tab.active{
            color: #FFC600;
        }
        #main .box_middle_date_tab .orange{
            display: none;
            color: #FFC600;
        }
        #main .box_middle_date_tab .grey{
            display: block;
            color: #6F6F6F;
        }
        #main .box_middle_date_tab.active .orange{
            display: block;
        }
        #main .box_middle_date_tab.active .grey{
            display: none;
        }
        #main .box_middle_date .split{
            width: 2%;
            height: 40px;
            float: left;
        }
            /*影院场次*/
            .box_middle_list{
                margin-top: 4px;
                overflow: scroll;
                -webkit-box-flex: 1; 
                -webkit-flex: 1;
                flex: 1;
                width: 100%;
            }
            .box_middle_li{
                height: 70px;
                width: 100%;
                background-color: #373737;
                margin: 1px auto;
                display: -webkit-box;
                -webkit-box-orient:horizontal;
                /*display: -webkit-flex;
                display: flex;*/
                position: relative;
            }
            .box_middle_li span{
                color: #9B9B9B;
                font-size: 12px;
            }
            .box_middle_li .li_div{
                /*float: left;*/
                display: table-cell;
                text-align: center;
                color: #9B9B9B;
                height: 100%;
            }
            .box_middle_li .li_1{
                /*width: 70px;*/
                width: 3em;
                line-height: 70px;
                color: #FFF;
                font-size: 1.4em;
            }
            .box_middle_li .li_2{
                width: 25px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            .box_middle_li .li_3{
                /*width: 70px;*/
                width: 3.5em;
                line-height: 70px;
            }
            .box_middle_li .li_4{
                width: 25px;
            }
            .box_middle_li .li_4 .now{
                color: #FFC600;
                position: relative;
                top: 4px;
            }
            .box_middle_li .li_4 .before{
                text-decoration: line-through;
            }
            .box_middle_li .li_5{
                /*width: 70px;*/
                line-height: 70px;
                /*display: block;*/
                -webkit-box-flex: 1; 
                /*-webkit-flex: 1;
                flex: 1;*/
                position: absolute;
                right: 1em;
            }
            .box_middle_li .li_5 .li_btn{
                /*width: 70px;*/
                width: 4.5em;
                height: 34px;
                line-height: 34px;
                background-color: #FFC600;
                /*position: relative;*/
                /*left: 1em;*/
            }
            .box_middle_li .li_5 .li_btn:active{
                background-color: #C5A123;
            }
            


            /*影院场次end*/


        #box_bottom_shadow{
            height: 70px;
        }

        /*box_bottom*/
        #main .box_bottom{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 70px;
            background-color: #292929;
            z-index: 5;
            overflow: hidden;
            /*box-shadow: #222 0px -15px 30px;*/
        }
        #main .box_bottom_left{
            display: inline-block;
            float: left;
            height: 100%;
            margin-left: 1em;
        }
        #main .box_bottom_right{
            display: inline-block;
            float: right;
            height: 100%;
            text-align: right;
            margin-right: 1em;
        }


        #main .box_bottom_left span{
            color: #FFC600;
            font-size: 1.2em;
            height: 35px;
            display: block;
        }
        #main .box_bottom_left .top{
            line-height: 40px;
        }
        #main .box_bottom_left .bottom{
            color: #6F6F6F;
            font-size: 11px;
        }


        #main .box_bottom_right span{
            color: #FFC600;
            font-size: 1.6em;
            line-height: 70px;
        }
        #main .box_bottom_right .small{
            font-size: 11px;
        }
    </style>
</head>
<body ontouchstart="">
    <div id="wrap">
        <div id="header">
            <a id="cinemaDetailBackBtn" tapmode onclick="api.closeWin();">
                <img src="../../res/drawable-hdpi/ic_launcher.png" class="chooseCityImg">
                <span class="chooseCityBackSpan">影院详情</span>
            </a>
            <!-- <a id="chooseStyleBtn" class="" tapmode>

            </a> -->
        </div>
        <div id="headerBanner">
            <span class="name">
                什么什么影院
            </span>
            <span class="cinema_right">
                <i class="status status_t"></i>
                <i class="status status_s"></i>
                <i class="status status_g"></i>
            </span>
            <span class="info"></span>
            <span class="collect" tapmode></span>
        </div>
        <div id="main">
            <!-- 海报展示部分 -->
            <div class="box_top">
                <ul id="movieList">
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/1.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/2.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/3.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/4.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/5.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/1.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/2.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/3.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/4.jpg" alt="">
                        </div>
                    </li>
                    <li class="movies">
                        <div class="moviesTransBox">
                            <img src="../../image/5.jpg" alt="">
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 海报展示部分end -->
            <div class="box_middle">
                
                <div class="box_middle_top">
                    <div class="box_middle_title">
                        <span class="">忍者神龟：变种时代</span>
                        <span class="pull-right" onclick="goDetail();" tapmode>影片介绍&rsaquo;&rsaquo;</span>
                    </div>
                </div>
                <div class="box_middle_bottom">
                    <div class="box_middle_date">
                        <div class="box_middle_date_tab active">
                            <span class="grey">今天</span>
                            <span class="orange">今天11月6号</span>
                        </div>
                        <div class="split">&nbsp;&nbsp;</div>                        
                        <div class="box_middle_date_tab">
                            <span class="grey">明天</span>
                            <span class="orange">明天11月7号</span>
                        </div>
                        <div class="split">&nbsp;&nbsp;</div>
                        <div class="box_middle_date_tab last">
                            <span class="grey">后天</span>
                            <span class="orange">后天11月8号</span></div>
                        </div>
                    <!-- <ul class="box_middle_list">
                        <li class="box_middle_li">
                            <div class="li_1 li_div">15:00</div>
                            <div class="li_2 li_div">
                                <span>英语 3D</span>
                            </div>
                            <div class="li_3 li_div">1号厅</div>
                            <div class="li_4 li_div">
                                <span class="now">
                                    ￥45
                                    <span class="before">
                                        ￥50
                                    </span>
                                </span>

                            </div>
                            <div class="li_5 li_div">
                                <a class="li_btn">
                                    选座购票
                                </a>
                            </div>
                        </li>
                        <li class="box_middle_li">
                            <div class="li_1 li_div">15:00</div>
                            <div class="li_2 li_div">
                                <span>英语 3D</span>
                            </div>
                            <div class="li_3 li_div">1号厅</div>
                            <div class="li_4 li_div">
                                <span class="now">
                                    ￥45
                                    <span class="before">
                                        ￥50
                                    </span>
                                </span>

                            </div>
                            <div class="li_5 li_div">
                                <a class="li_btn">
                                    选座购票
                                </a>
                            </div>
                        </li>
                        <li class="box_middle_li">
                            <div class="li_1 li_div">15:00</div>
                            <div class="li_2 li_div">
                                <span>英语 3D</span>
                            </div>
                            <div class="li_3 li_div">1号厅</div>
                            <div class="li_4 li_div">
                                <span class="now">
                                    ￥45
                                    <span class="before">
                                        ￥50
                                    </span>
                                </span>

                            </div>
                            <div class="li_5 li_div">
                                <a class="li_btn">
                                    选座购票
                                </a>
                            </div>
                        </li>
                    </ul> -->
                </div>
                <!-- <div id="box_bottom_shadow"></div> -->
            </div>
            <div class="box_bottom">
                <div class="box_bottom_left">
                    <span class="top">影院兑换券</span>
                    <span class="bottom">价格更低，需到影院前台兑换场次座位</span>
                </div>
                <div class="box_bottom_right">
                    <span class="price">
                        ￥32.5
                        <span class="small">起</span>
                    </span>
                    
                </div>
            </div>
            <img src="../../image/1.jpg" alt="" id="main_shadow">
        </div>


    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/moving.js"></script>
<script type="text/javascript">

    apiready = function(){
        Zepto(function($){
            var header = $api.byId('header');
        	$api.fixStatusBar( header );
            var headerPos = $api.offset(header);

            var wW = $(window).width();
            var wH = $(window).height();

            var boxMiddleBottom = $api.dom('.box_middle_bottom');
            var boxMiddleDate = $api.dom('.box_middle_date');
            var boxBottom = $api.dom('.box_bottom');
            var fH = $api.offset(boxMiddleBottom).h - $api.offset(boxMiddleDate).h - $api.offset(boxBottom).h-2; 
            var fT = $api.offset(header).h + $api.offset($api.byId('headerBanner')).h +$api.offset($api.dom('#main .box_top')).h + $api.offset($api.dom('#main .box_middle_top')).h + $api.offset(boxMiddleDate).h+2;
            api.openFrame({
                name: 'cinema_detail_con',
                url: './cinema_detail_con.html',
                bounces: false,
                rect: {
                    w: 'auto',
                    h: fH,
                    x: 0,
                    y: fT
                }
            });




            var $main_shadow = $('#main_shadow');
            var cinemaDetailBackBtn = $api.byId('cinemaDetailBackBtn');
            // 计算滑动时必需的参数
                // 中间线
            var middleLine = parseInt(wW/2);
                // 单个单位的 rect
            var $movieUnit = $('#movieList .movies');
            var rect =  $movieUnit.offset();//api.rect

            var $movieList = $(movieList);
            
            var movingUnitL = parseInt(rect.width);
            var leftToLeft = middleLine - (rect.width)/2;
            $movieList.css('padding-left', leftToLeft);

            // 初始化swipe,添加删除movieUnit时可以调用；
            // 与原版应用有区别，不能连续拖动多个海报
            window.swipeInit = function(){
                var moveUnits = $api.domAll('#fixedRight .movies');
                window.movingUnit = new Moving(
                    movieList,
                    {
                        dir: 'x',
                        conf: {
                            distance: rect.width,
                            stanScale: 0.8
                        },
                        l: movingUnitL,
                        touchStartFn: function(){  
                        },
                        callback: function() {

                        },
                        transEndFn: function() {
                            var $curUnit = $(this.nodes[this.currentPoint]);
                            $main_shadow.attr('src',$curUnit.find('img').attr('src'));
                        }
                    }
                );
            };
            swipeInit();

            // 选择日期
            var aDateTab = $('#main .box_middle_date_tab');
            aDateTab.on('click', function(event) {
                aDateTab.removeClass('active');
                $(this).addClass('active');
                event.preventDefault();
            });

            $('#headerBanner .collect').on('click', function(event) {
                $(this).toggleClass('active');
            });
        });
    };
    // apiready();
</script>
</html>